<template>
  <div class="cart_info2_box">
    <div class="cart_info2_box_list1">
      <dv-border-box-1>
        <h2></h2>
        <gaugechart2 />
      </dv-border-box-1>

      <dv-border-box-1>
        <wordCloud1 />
      </dv-border-box-1>
    </div>
    <div class="cart_info2_box_list2">
      <dv-border-box-1 >
        <map_cart1 />
      </dv-border-box-1>
      <dv-border-box-1>
        <linechart1 />
      </dv-border-box-1>
    </div>
    <div class="cart_info2_box_list3">
      <dv-border-box-1>
        <linechart4 />
      </dv-border-box-1>
      <dv-border-box-1>
        <linechart5 />
      </dv-border-box-1>
    </div>
  </div>
</template>

<script>
import map_cart1 from "@/components/echart/Map/map_cart1.vue";
import gaugechart2 from "@/components/echart/gauge/gaugechart2.vue";
import linechart1 from "@/components/echart/Line/linechart1.vue";
import linechart4 from "@/components/echart/Line/linechart4.vue";
import linechart5 from "@/components/echart/Line/linechart5.vue";
import wordCloud1 from "@/components/echart/WordCloud/wordCloud1.vue";
export default {
  name: "cart_info2",
  components: {
    map_cart1,
    gaugechart2,
    linechart1,
    wordCloud1,
    linechart4,
    linechart5,
  }
};
</script>

<style scoped>
.cart_info2_box {
  width: 98%;
  margin: 0 auto;
  height: 87vh;
  display: flex;
  flex-direction: row;
  }

  /* // grid-template-columns: 2fr 3fr 5fr; 66*/
  /* // background-color: #554444; */
  .cart_info2_box_list1 {
    flex: 1;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* // background-color: #554444; */
    display: flex;
    flex-direction: column;
  }

  .cart_info2_box_list2 {
    flex: 2;
    width: 100%;
    padding: 10px;
    height: 100%;
    /* // background-color: rgb(57, 62, 66); */
    display: flex;
    flex-direction: column;
  }

  .cart_info2_box_list3 {
    flex: 1;
    width: 100%;
    padding: 10px;
    height: 100%;
    /* // background-color: rgb(57, 62, 66); */
    display: flex;
    flex-direction: column;
  }

</style>